<template>
  <i class="vk-icon" :class="{[`vk-icon--${type}`] : type }" :style="customStyles" v-bind="$attrs">
    <font-awesome-icon v-bind="props"/>
  </i>
</template>
<script setup lang="ts">
import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import type { IconProps } from './type';
import { computed } from 'vue'
defineOptions({
  name: 'VkIcon',
  inheritAttrs: false
})
type CombinedProps = FontAwesomeIconProps & IconProps
const props = withDefaults(defineProps<CombinedProps>(), {
  type: undefined, // 默认不传
  color: undefined, // 默认不传
});
const customStyles = computed(() => {
  return props.color ? { color: props.color } : {}
})
</script>
